<template>
  <!--
  <div class="content">
    <el-table
    v-loading="listLoading"
    :data="list"
    border
    highlight-current-row
    style="width: 100%;"
  >
    <el-table-column label="分类" width="90">
      <template slot-scope="{row}">
        <div><el-link type="primary">{{ row.parent.name }}</el-link> ></div>
         <el-link type="danger">{{ row.name }}</el-link>
      </template>
    </el-table-column>
    <el-table-column label="拣货列表">
      <template slot-scope="{row}">
        <div v-for="item in row.items" :key="item.id" class="item-line">
          <div>
            <div><el-link>{{item.product ? item.product.name : '*'}}</el-link></div>
            <el-link type="success">规格：{{ item.name }}</el-link>
          </div>
          <el-link type="danger">数量：{{ item.quantity }}</el-link>
        </div>
      </template>
    </el-table-column>
  </el-table>
  </div>
  -->

  <div class="content">

    <table class="gridtable">
      <tr>
        <th>分类</th><th>列表</th>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.parent.name }} > {{ item.name }}</td>
        <td>
          <div v-for="itm in item.items" :key="itm.id" class="item-line">
            <span class="name_item">名称</span>
            <span class="name_item">规格：{{itm.name}}</span>
            <span class="name_item">数量：{{itm.quantity}}</span>
          </div>
        </td>
      </tr>
    </table>

  </div>

</template>

<script>
import { getList } from '@/api/picking-order'

export default {
  data() {
    return {
      list: null,
      listLoading: false,
      date_value:[
        '2020-08-29',
        '2020-08-31'
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getList({
        from_date:this.date_value[0],
        to_date:this.date_value[1]
      }).then(response => {
        this.list = response.categories
        this.listLoading = false
      }).catch(error => {
        this.list = []
        this.listLoading = false
        Promise.reject(error)
      })
    },
    handleQuery:function(){
      if(!this.date_value){
        this.$message.error('请选择开始时间和结束时间');
        return
      }
      this.getList()
    }
  }
}
</script>

<style>
  @media print {
    @page {
      margin: 0;
    }
    body {
      margin: 2cm;
    }
  }

  .content{
    width: 594px;
    font-size:20px !important;
  }

  .item-line{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border:1px solid white;
    margin-bottom:5px;
  }

  table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
  }
  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
  }
  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
  }

  .name_item{
    margin-right:10px;
  }

</style>
